<template>
	<view class="myuni-control" :style="myDirection">
		<view class="control-item" :class="{actived:like}" @click.stop="emitClick(1)">
			<i class="iconfont icon-dianzan"></i>
			<text>点赞</text>
		</view>
		<view class="control-item" @click.stop="emitClick(2)">
			<i class="iconfont icon-review"></i>
			<text>评论</text>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<button class="control-item share" open-type="share">
			<i class="iconfont icon-fenxiang1"></i>
			<text>分享</text>
		</button>
		<!-- #endif -->
		<view class="control-item" @click.stop="emitClick(4)" :class="{actived:collect}">
			<i class="iconfont icon-jushoucang"></i>
			<text>收藏</text>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default{
	props:{
		column:{
			type:Boolean,
			default:true
		},
		direction:{
			type:String,
			default:'right bottom'
		},
		like:{
			type:Boolean,
			default:false
		},
		collect:{
			type:Boolean,
			default:false
		}
	},
	computed:{
		...mapState(['themeType']),
		myDirection(){
			let direction
			switch(this.direction){
				case 'right bottom':
				  direction={
					  right:0,
					  bottom:0
				  }
				break;
				case 'left bottom':
				  direction={
					  left:0,
					  bottom:0
				  }
				  break;
				case 'right top':
		   		  direction={
		   			  right:0,
		   			  top:0
		   		  }
			      break;
	   		    case 'left top':
			      direction={
			    	  left:0,
			    	  top:0
			        }
			      break;
			}
			direction['flex-direction']=this.column?'column':'row'
			return direction
		}
	},
	methods:{
		emitClick(index){
			this.$emit('controlClick',index)
		}
	}
}
</script>

<style lang="scss" scoped>
	.myuni-control{
		position: absolute;
		color: #2b353f;
		/*  #ifdef  MP-WEIXIN  */
		  right: 0;
		  bottom: 0;
		  flex-direction: column;
		  color: #fff;
		/*  #endif  */
		display: flex;
		justify-content: space-between;
		.control-item{
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.share{
			width: 104rpx;
			height: 114rpx;
			line-height: 114rpx;
			background-color: unset;
			color: #2b353f;
			&::after{
				border: unset;
			}
			.iconfont{
				height: 32rpx;
				line-height: 32rpx;
				font-size: 32rpx;
			}
			text{
				height: 64rpx;
				line-height: 64rpx;
				font-size: 32rpx !important;
			}
		}
		.actived{
			color: red;
		}
	}
</style>
